<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品页面</title>
    <link rel="stylesheet" href="../../css/elementui.css">
    <link rel="stylesheet" href="../../css/user-goods.css">
    <link rel="shortcut icon" href="../../img/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css"/>
    <link href="../../css/user-style.css" rel="stylesheet">
</head>
<body>
<div id="app">

    <div id="header">
        <!-- 顶部导航栏 -->
        <nav id="site-nav" role="navigation">
            <div class="workArea">
                <!-- 导航栏左半部分,如果取不到用户信息则显示如下： -->
                <span v-if="!login">
                    <span>喵，欢迎来天猫</span>
                    <span><a href="/pages/login.html">请登录</a></span>
                    <span><a href="/pages/user/regist.html">免费注册</a></span>
                </span>
                <!-- 如果用户成功登录，则显示如下： -->
                <span v-if="login">
                    <span>Hi，{{loginUser.name}}</span>
                    <!--积分是假数据-->
                    <span><a href="nowhere">积分 <strong>1325</strong></a></span>
                    <span @click="logout"><a href="#">退出</a></span>
                </span>
                <!-- 导航栏右半部分：使用Bootstrap的pull-right类 -->
                <span class="pull-right" v-if="login">
                    <a href="/pages/user/order.html">我的订单</a>
                    <a href="/pages/user/cart.html">
                        <span class="glyphicon glyphicon-shopping-cart redColor"></span>
                        购物车<strong id="cartTotalItemNumber">{{shopNum}}</strong>件
                    </a>
                </span>
            </div>
        </nav>
        <!--搜索框-->
        <div class="header">
            <div class="headerLayout workArea">
                <!-- 图片logo -->
                <div class="logo">
                    <a href="index.html">
                        <img src="../../img/tmall-logo.png">
                    </a>
                </div>
                <!-- 搜索框 -->
                <form class="mallSearch-input" action="/searchProduct">
                    <input name="keyword" type="text" placeholder="搜索 天猫 商品/品牌/店铺">
                    <button type="button" class="searchButton" @click="searchGoods">搜索</button>
                    <ul class="hot-query">
                        <li>
                            <a href="searchProduct?keyword=针织衫">针织衫</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">连衣裙</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">四件套</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">摄像头</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">客厅灯</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">口红</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">手机</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">运动鞋</a>
                        </li>
                        <li class="hot-query-li">
                            <a href="">牛奶</a>
                        </li>
                    </ul>
                </form>
            </div>
        </div>

        <div style="clear: both;"/>

    </div>

    <div id="main">
        <div class="product">
            <div class="imgAndInfo">
                <div class="imgInimgAndInfo">
                    <!--<img class="bigImg" src="../img/product/${product.id}/1.jpg">-->
                    <img class="bigImg" id="bigImgMain" :src="goodsMainImg.img1">
                    <div class="smallImageDiv" >
                        <!--<img class="smallImg" :src="goodsDetailImg.img+count" bigImgURL="goodsDetailImg.img{{count}}">-->
                        <img class="smallImg" :src="goodsMainImg.img1" @click="changeBigImg(1)">
                        <img class="smallImg" :src="goodsMainImg.img2" @click="changeBigImg(2)">
                        <img class="smallImg" :src="goodsMainImg.img3" @click="changeBigImg(3)">
                        <img class="smallImg" :src="goodsMainImg.img4" @click="changeBigImg(4)">
                        <img class="smallImg" :src="goodsMainImg.img5" @click="changeBigImg(5)">
                        <div class="img4load hidden"></div>
                    </div>
                </div>

                <div class="infoInimgAndInfo">
                    <div class="productTitle">
                        {{goods.title}}
                    </div>
                    <div class="productSubTitle">
                        {{goods.titleShow}}
                    </div>
                    <div class="productPrice">
                        <div class="productPriceDiv">
                            <div class="gouwujuanDiv"><img src="../../img/tmall-coupon.png">
                                <span> 全天猫实物商品通用</span>
                            </div>
                            <div class="promotionDiv">
                                <span class="promotionPriceDesc">价格</span>
                                <span class="promotionPriceYuan">¥</span>
                                <span class="promotionPrice">{{goods.lowPrice}}</span>
                                <span class="promotionPrice" v-if="!equal">-{{goods.highPrice}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="productSaleAndReviewNumber">
                        <div>销量  <span class="redColor boldWord">{{goods.salesMonth}}</span></div>
                        <div>发货地  <span class="redColor boldWord">{{goods.deliveryPlace}}</span></div>
                    </div>
                    <div class="productNumber">
                        <span>数量</span>
                        <span>
                <!--<span class="productNumberSettingSpan">-->
                            <!--<input type="text" id="number" value="1" class="productNumberSetting">-->
                            <!--</span>-->
                            <!--					<span class="arrow">
                                                    <a class="increaseNumber" href="#nowhere">
                                                    <span class="updown">
                                                       <img src="../img/increase.png">
                                                    </span>
                                                    </a>
                                                    <span class="updownMiddle"> </span>
                                                    <a class="decreaseNumber" href="#nowhere">
                                                        <span class="updown">
                                                        <img src="../img/decrease.png">
                                                    </span>
                                                    </a>
                                                </span>-->
                    <template>
                      <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
                    </template>
					件</span>
                        <span>库存{{goods.stock}}件</span>
                    </div>
                    <div class="serviceCommitment">
                        <span class="serviceCommitmentDesc"><a href="#nowhere">服务承诺</a></span>
                        <span class="serviceCommitmentLink">
                    <a href="#nowhere">正品保证</a>
                    <a href="#nowhere">极速退款</a>
                    <a href="#nowhere">赠运费险</a>
                    <a href="#nowhere">七天无理由退换</a>
                </span>
                    </div>
                    <!--            <script>
                                    function buyLink() {
                                        window.location = "/buyone?product_id="+${product.id}+
                                            "&number=" + $("#number").val();
                                    }
                                </script>-->
                    <div class="buyDiv">
                        <template>
                            <a class="buyLink">
                                <button class="buyButton" @click="buyLink">立即购买</button>
                            </a>
                        </template>
                        <template>
                            <a class="addCartLink" href="#nowhere">
                                <el-button plain class="addCartButton" @click="addToCart"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</el-button>
                            </a>
                        </template>

                    </div>
                </div>
                <div style="clear:both"></div>
            </div>
        </div>
        <div style="clear: both;"></div>

        <div class="productDetailDiv" style="display: block;">
            <div class="productDetailTopPart">
                <a class="productDetailTopPartSelectedLink selected" href="#nowhere">商品详情</a>
                <a class="productDetailTopReviewLink" href="#nowhere">累计评价 <span
                        class="productDetailTopReviewLinkNumber">{{evalueNum}}</span> </a>
            </div>

            <div class="productParamterPart">
                <div class="productParamter">产品参数：</div>
                <div class="productParamterList">
                    <!--            <c:forEach items="${propertyValues}" var="pvs">
                                    <span>${pvs.property.name}:${pvs.value}</span>
                                </c:forEach>-->
                    <!--遍历产品属性列表
                    <span v-for="p in properties">{{p.name}}:{{p.value}}</span>-->
                    <span>品牌：{{properties.brand}}</span>
                    <span>适用年龄：{{properties.fitAge}}</span>
                    <span>货号：{{properties.itemNo}}</span>
                    <span>上市年份：{{properties.sentSeason}}</span>
                    <span>销售渠道：{{properties.salesChannelType}}</span>
                    <span>图案：{{properties.pattern}}</span>
                    <span>基础风格：{{properties.style}}</span>
                    <span>材质成分：{{properties.materialComposition}}</span>
                </div>
                <div style="clear:both"></div>
            </div>
            <div class="productDetailImagesPart">
                <!--<img src="http://how2j.cn/tmall/../img/productDetail/8626.jpg">-->
                <img :src="goodsDetailImg.img1" v-if="goodsDetailImg.number>0">
                <img :src="goodsDetailImg.img2" v-if="goodsDetailImg.number>1">
                <img :src="goodsDetailImg.img3" v-if="goodsDetailImg.number>2">
                <img :src="goodsDetailImg.img4" v-if="goodsDetailImg.number>3">
                <img :src="goodsDetailImg.img5" v-if="goodsDetailImg.number>4">
                <img :src="goodsDetailImg.img6" v-if="goodsDetailImg.number>5">
                <img :src="goodsDetailImg.img7" v-if="goodsDetailImg.number>6">
                <img :src="goodsDetailImg.img8" v-if="goodsDetailImg.number>7">
                <img :src="goodsDetailImg.img9" v-if="goodsDetailImg.number>8">
                <img :src="goodsDetailImg.img10" v-if="goodsDetailImg.number>9">
            </div>
        </div>
        <div style="clear:both"></div>
        <div class="productReviewDiv" style="display: block;">
            <div class="productReviewTopPart">
                <div class="productReviewTopPart">
                    <a class="productReviewTopPartSelectedLink" href="#nowhere">商品详情</a>
                    <a class="selected" href="#nowhere">累计评价 <span
                            class="productReviewTopReviewLinkNumber">{{evalueNum}}</span> </a>
                </div>
                <div class="productReviewContentPart">
                    <!--<c:forEach items="${reviews}" var="r">-->
                    <div class="productReviewItem">
                        <div v-for="eva in evalueList">
                            <div class="productReviewItemDesc">
                                <div class="productReviewItemContent">
                                    {{eva.content}}
                                </div>
                                <div class="productReviewItemDate">{{eva.date}}</div>
                            </div>
                            <div class="productReviewItemUserInfo">
                                {{eva.username}}<span class="userInfoGrayPart">（匿名）</span>
                            </div>
                            <div style="clear:both"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="footer" class="footer" style="display: block;">

        <div class="workArea">
            <div class="tmall-ensure">
                <a href="#nowhere">
                    <img src="../../img/footer1.png">
                    <img src="../../img/footer2.png">
                    <img src="../../img/footer3.png">
                    <img src="../../img/footer4.png">
                </a>
            </div>

            <div class="tmall-desc">
                <dl>
                    <dt><span>购物指南</span></dt>
                    <dd><a href="#nowhere">免费注册</a></dd>
                    <dd><a href="#nowhere">开通支付宝</a></dd>
                    <dd><a href="#nowhere">支付宝充值</a></dd>
                </dl>
                <dl>
                    <dt><span>天猫保障</span></dt>
                    <dd><a href="#nowhere">发票保障</a></dd>
                    <dd><a href="#nowhere">售后规则</a></dd>
                    <dd><a href="#nowhere">缺货赔付</a></dd>
                </dl>
                <dl>
                    <dt><span>支付方式</span></dt>
                    <dd><a href="#nowhere">快捷支付</a></dd>
                    <dd><a href="#nowhere">信用卡</a></dd>
                    <dd><a href="#nowhere">余额宝</a></dd>
                    <dd><a href="#nowhere">蚂蚁花呗</a></dd>
                    <dd><a href="#nowhere">货到付款</a></dd>
                </dl>
                <dl>
                    <dt><span>商家服务</span></dt>
                    <dd><a href="#nowhere">天猫规则</a></dd>
                    <dd><a href="#nowhere">商家入驻</a></dd>
                    <dd><a href="#nowhere">商家中心</a></dd>
                    <dd><a href="#nowhere">天猫智库</a></dd>
                    <dd><a href="#nowhere">物流服务</a></dd>
                    <dd><a href="#nowhere">喵言喵语</a></dd>
                    <dd><a href="#nowhere">运营服务</a></dd>
                </dl>
                <dl>
                    <dt><span>手机天猫</span></dt>
                    <dd><a href="#nowhere"><img src="../../img/qr-code.png"></a></dd>
                </dl>
            </div>

            <div style="clear:both"></div>
        </div>

        <div class="workArea">
            <img src="../../img/tmall-cat.png" class="tmall-cat">
        </div>
        <div class="tmall-copyright">
            <div class="workArea">
                <div class="mui-global-fragment-load">
                    <div class="footer-tmallinfo">
                        <a href="#nowhere" style="padding-left:0px">关于天猫</a>
                        <a href="#nowhere">帮助中心</a>
                        <a href="#nowhere">开放平台</a>
                        <a href="#nowhere">诚聘英才</a>
                        <a href="#nowhere">联系我们</a>
                        <a href="#nowhere">网站合作</a>
                        <a href="#nowhere">法律声明</a>
                        <a href="#nowhere">知识产权</a>
                        <a href="#nowhere">廉正举报</a>
                        <a href="#nowhere">规则意见征集</a>
                    </div>
                    <div class="footer-tmallinfo">
                        <a href="#nowhere" style="padding-left:0px">阿里巴巴集团</a><span class="slash">|</span>
                        <a href="#nowhere">淘宝网</a><span class="slash">|</span>
                        <a href="#nowhere">天猫</a><span class="slash">|</span>
                        <a href="#nowhere">聚划算</a><span class="slash">|</span>
                        <a href="#nowhere">全球速卖通</a><span class="slash">|</span>
                        <a href="#nowhere">阿里巴巴国际交易市场</a><span class="slash">|</span>
                        <a href="#nowhere">1688</a><span class="slash">|</span>
                        <a href="#nowhere">阿里妈妈</a><span class="slash">|</span>
                        <a href="#nowhere">飞猪</a><span class="slash">|</span>
                        <a href="#nowhere">阿里云计算</a><span class="slash">|</span>
                        <a href="#nowhere">AliOS</a><span class="slash">|</span>
                        <a href="#nowhere">阿里通信</a><span class="slash">|</span>
                        <a href="#nowhere">万网</a><span class="slash">|</span>
                        <a href="#nowhere">高德</a><span class="slash">|</span>
                        <a href="#nowhere">UC</a><span class="slash">|</span>
                        <a href="#nowhere">友盟</a><span class="slash">|</span>
                        <a href="#nowhere">虾米</a><span class="slash">|</span>
                        <a href="#nowhere">阿里星球</a><span class="slash">|</span>
                        <a href="#nowhere">来往</a><span class="slash">|</span>
                        <a href="#nowhere">钉钉</a><span class="slash">|</span>
                        <a href="#nowhere">支付宝</a>
                    </div>

                    <div class="footer-copyright">
                        增值电信业务经营许可证：<a href="#nowhere">浙B2-20110446</a>
                        网络文化经营许可证：<a href="#nowhere">浙网文[2015]0295-065号</a>
                        <a href="#nowhere">12318举报</a>
                        <span>互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com</span>
                        <br/>
                        互联网药品信息服务资质证书编号：<a href="#nowhere">浙-（经营性）-2017-0005</a>
                        <a href="#nowhere"><img src="../../img/police-icon.png">浙公网安备 33010002000120号</a>
                        <span>（浙）网械平台备字[2018]第00002号</span>
                        <div class="copyRightYear">© 2003-2018 TMALL.COM 版权所有</div>
                        <div>
                            <img src="../../img/copyRight1.jpg">
                            <img src="../../img/copyRight2.jpg">
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
</div>
</body>

<!-- 引入vue和elementUI所需配置文件 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../../js/vue.js"></script>
<script src="../../js/elementui.js"></script>
<script src="../../js/axios.js"></script>
<!--jquery文件-->
<script type="text/javascript" src="../../plugins/jquery/jQuery-2.2.3.min.js"></script>
<!--bootstrap-->
<script src="../../plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- util.js文件 -->
<script type="text/javascript" src="../../js/util.js"></script>
<!-- 页面js文件 -->
<script type="text/javascript" src="../../js/user-goods.js"></script>

</html>